<template>
    <section id="shop-detail">
        <div @click="flag == false" class="turn-black" v-show="turn"></div>
        <p class="nav">
            <span class="left" @click="back()"></span>
            <router-link to="/car1" :class="'right'"></router-link>
        </p>

        <div class="swiper">
            <swiper ref="mySwiper" :options="swiperOption">
                <swiper-slide v-for="banner in content.banner">
                    <img :src="banner" alt />
                </swiper-slide>
            </swiper>
        </div>
        <p class="price">
            {{content.price}}0
            <i>￥</i>
            <s>￥{{content.orPrice}}</s>
            <u>{{content.discount}}折</u>
        </p>
        <p class="title">{{content.title}}</p>
        <p class="select">
            <span>请选择：颜色 尺码</span>
            <i></i>
        </p>
        <div class="comment">
            <p>
                <span>买家评价 {{content.comment.num}} | 销量 {{content.comment.saleNum}}</span>
                <i></i>
            </p>
            <ul>
                <li v-for="(item,index) in content.comment.con" v-if="index<=1">
                    <p class="user">
                        <i :style="{backgroundImage:'url('+item.userPic+')'}"></i>
                        <span>{{item.name}}</span>
                    </p>
                    <p class="text">{{item.text}}</p>
                    <span class="data">{{item.data}}</span>
                </li>
            </ul>
        </div>

        <div class="shopName">
            <p>
                <u :style="{backgroundImage:'url('+content.shopImg+')'}"></u>
                {{content.shopName}}
            </p>
            <span class="enter">
                进店
                <i></i>
            </span>
        </div>
        <ul class="detailCon">
            <li v-for="item in content.detailImg">
                <img :src="item" alt />
            </li>
        </ul>
        <div class="bottom">
            <p class="opration">
                <router-link to>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedianpu" />
                    </svg>
                    <span>店铺</span>
                </router-link>
            </p>
            <p class="opration server">
                <router-link to>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-kefu" />
                    </svg>
                    <span>客服</span>
                </router-link>
            </p>
            <p class="opration">
                <router-link to>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang" />
                    </svg>
                    <span>收藏</span>
                </router-link>
            </p>
            <p class="buy add" @click="flag=!flag,turn=!turn">
                <span>加入购物车</span>
            </p>
            <p class="buy gobuy">
                <router-link to>
                    <span>立即购买</span>
                </router-link>
            </p>
        </div>

        <div class="add-to-car" v-show="flag">
            <div class="top">
                <img :src="content.info.img" alt />
                <p>
                    <span class="prices">
                        {{content.price}}0
                        <i>￥</i>
                    </span>
                    <span>库存{{content.info.inventory}}件</span>
                    <span>请选择：颜色 尺码</span>
                    <b class="close" @click="flag=!flag,turn=!turn"></b>
                </p>
            </div>
            <ul>
                <li v-for="(items,i) in content.info.style">
                    <span>{{items.name}}</span>
                    <ol>
                        <li 
                        v-for="(item,index) in items.classes" :key="index"
                        @click="selected_m(i,index)"
                        >{{item}}</li>
                    </ol>
                </li>
                <li>
                    <span>数量</span>
                    <br />
                    <p class="number">
                        <span class="op" @click="mul()">-</span>
                        <span>{{num}}</span>
                        <span class="op" @click="add()">+</span>
                    </p>
                </li>
            </ul>
            <p class="sure">确定</p>
        </div>
    </section>
</template>
    </section>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data() {
        return {
            prop: "",
            content: [],
            swiperOption: {},
            flag: false,
            turn: false,
            num: 1,
            selected:false,
            index:0,
            border:false,
            indexs:0,
            is:0
        };
    },
    mounted() {
        this.prop = this.$route.params.title;
        this.$http.get("./data/shopDetail.json").then(res => {
            var list = res.data.list;
            // console.log(list)
            for (var i in list) {
                if (this.prop == list[i].id) {
                    this.content = list[i];
                    break;
                }
            }
        });
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        selected_m(s,i){
            this.indexs = i;
            this.is = s;
            if(this.border){
                this.border = !this.border;
            }else{
                this.border = !this.border;
            }
        },
        mul() {
            if (this.num <= 1) {
                Toast({
                    message: "商品数量不能小于0",
                    position: "bottom",
                    duration: 3000
                });
            } else {
                this.num--;
            }
        },
        add(){
            if (this.num >= 5) {
                Toast({
                    message: "超出购买数量",
                    position: "bottom",
                    duration: 2000
                });
            } else {
                this.num++;
            }
        }
    }
};
</script>

<style lang="scss">
#shop-detail {
    @mixin i-bg {
        display: inline-block;
        width: 15px;
        height: 15px;
        transform: rotate(180deg);
        background: url("../../assets/images/mine/return.png") no-repeat
            center/contain;
    }
    padding-bottom: 30px;
    position: relative;

    .turn-black {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 200;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .nav {
        display: flex;
        height: 30px;
        padding: 10px 15px;
        justify-content: space-between;
        border-bottom: 1px solid gray;

        .left,
        .right {
            display: inline-block;
            width: 22px;
            height: 100%;
        }
        .left {
            background: url("../../assets/images/mine/return.png") no-repeat
                center;
            background-size: contain;
        }
        .right {
            background: url("../../assets/images/shopcar.png") no-repeat center;
            background-size: contain;
        }
        a {
            text-decoration: none;
        }
    }
    .swiper {
        position: relative;
        z-index: 100;
        .swiper-container {
            width: 70%;
            height: 60vh;
            img {
                height: 100%;
            }
        }
        margin-bottom: 10px;
    }
    .price {
        display: inline-block;
        font-size: 35px;
        position: relative;
        padding-left: 30px;
        i,
        s,
        u {
            position: absolute;
            font-size: 12px;
        }
        i {
            left: 20px;
            top: 0;
            font-style: normal;
        }
        s {
            top: 0;
            right: -38px;
            color: rgb(192, 192, 192);
        }
        u {
            bottom: 0;
            right: -30px;
            padding: 2px 4px;
            text-decoration: none;
            border-radius: 3px;
            font-size: 11px;
            color: #ff3667;
            background-color: #fde7ed;
        }
    }
    .title {
        margin: 20px 20px;
        font-size: 17px;
    }
    .select {
        border-top: 15px solid #eaeaea;
        border-bottom: 15px solid #eaeaea;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        i {
            @include i-bg;
        }
        span {
            font-size: 13px;
            color: gray;
        }
    }
    .comment {
        padding: 20px;
        & > p {
            display: flex;
            justify-content: space-between;
            span {
                font-size: 12px;
                color: rgb(177, 177, 177);
            }
            i {
                @include i-bg;
            }
        }

        li {
            margin: 10px 0 20px;
            .text {
                color: gray;
                margin: 10px 0;
            }
            .data {
                color: gray;
                font-size: 12px;
            }
            .user {
                i {
                    display: inline-block;
                    width: 30px;
                    height: 30px;
                    background-size: contain;
                    border-radius: 50%;
                    margin-right: 5px;
                    vertical-align: middle;
                }
                span {
                    font-size: 14px;
                }
            }
        }
    }
    .shopName {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        u {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-size: contain;
            vertical-align: middle;
            margin-right: 10px;
        }
        .enter {
            font-size: 12px;
            color: gray;
            i {
                @include i-bg;
            }
        }
    }
    .detailCon {
        li {
            margin-bottom: 20px;
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
    .bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        width: 100%;
        line-height: 25px;

        .opration {
            width: 15%;
            text-align: center;
            background-color: white;
            a {
                span {
                    display: block;
                    font-size: 10px;
                    color: rgb(41, 41, 41);
                    line-height: 20px;
                }
            }
            &.server {
                color: #ff3667;
            }
        }
        a {
            text-decoration: none;
        }
        .buy {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 27.5%;
            font-size: 14px;
            &.add {
                background-color: #ffd5de;
                color: #ff557b;
            }
            &.gobuy {
                background-color: #ff557b;
                a {
                    color: white;
                }
            }
        }
    }
    .add-to-car {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background-color: white;
        .top {
            padding: 10px;
            position: relative;
            img {
                width: 20%;
                position: absolute;
                bottom: 0px;
            }
            p {
                margin-left: 80px;
                span {
                    display: block;
                    margin-left: 10px;
                    font-size: 12px;
                    &.prices {
                        font-size: 25px;
                        position: relative;
                        i {
                            position: absolute;
                            font-style: normal;
                            left: -10px;
                            top: 0;
                            font-size: 12px;
                        }
                    }
                }
            }
            .close {
                right: 19px;
                position: absolute;
                top: 4px;
                width: 15px;
                height: 15px;
                background: url("../../assets/images/detail/close40x40.png")
                    no-repeat center/contain;
            }
        }
        ul {
            color: rgb(65, 65, 65);
            margin: 10px;
            & > li {
                margin-bottom: 20px;
                font-size: 12px;
                ol {
                    display: flex;
                    flex-wrap: wrap;
                    li {
                        margin-top: 6px;
                        padding: 3px 15px;
                        margin-right: 10px;
                        border-radius: 5px;
                        border: 1px solid rgb(204, 204, 204);
                        &.cur{
                            border: 1px solid  #ff498a;
                        }
                    }
                }
                .number {
                    border: 1px solid rgb(204, 204, 204);
                    display: inline-block;
                    border-radius: 5px;
                    span {
                        display: inline-block;
                        padding: 3px 10px;
                        border-left: 1px solid rgb(204, 204, 204);
                        &:first-child {
                            border-left: none;
                        }
                        &.op {
                            color: #ff3667;
                        }
                    }
                }
            }
        }
        .sure {
            text-align: center;
            background-color: #ff498a;
            line-height: 45px;
            color: white;
        }
    }
}
</style>